<template>
	<view class="">
		<!-- <u-swiper :list="swiperList" :effect3d="true"></u-swiper> -->
		<view v-for="(post, index) in posts" :key="index" @click="openDetail(post)">
			<view class="p-2">
				<view class="font-md u-line-3 mb-2 text-dark" style="font-weight: 500;">{{ post.title.rendered }}</view>
				<u-image :src="post.articleInfor.thumbnail" mode="widthFix" style="max-height: 200rpx;" class="rounded"></u-image>
				<view class="flex text-light-muted">
					<view class="mr-1">{{post.articleInfor.classify[0].cat_name}}</view>
					<view class="mr-1">{{post.articleInfor.viewCount}} 观看</view>
					<view>{{$dayjs(post.modified).format('YYYY-MM-DD')}}</view>
				</view>
			</view>
			
			<u-gap v-if="index < posts.length -1" height="20" bg-color="#e5e5e5"></u-gap>
		</view>
	</view>
</template>

<script>
import { getInfo } from '@/api/system.js';
import { getPosts } from '@/api/posts.js';
export default {
	data() {
		return {
			info: {},
			posts: [],
			list: [
				{
					name: '待收货'
				},
				{
					name: '待付款'
				},
				{
					name: '待评价',
					count: 5
				}
			],
			swiperList: [
				{
					image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					title: '昨夜星辰昨夜风，画楼西畔桂堂东'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					title: '身无彩凤双飞翼，心有灵犀一点通'
				},
				{
					image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
				}
			]
		};
	},
	async onLoad() {
		const info = await getInfo();
		const posts = await getPosts();
		this.info = info;
		this.posts = posts;
	},
	// 下拉刷新
	async onPullDownRefresh() {
		let _self = this
		const posts = await getPosts();
		this.posts = posts;
		uni.stopPullDownRefresh();//停止当前页面下拉刷新
	},
	methods: {
		openDetail(post) {
			uni.navigateTo({
				url: `/pages/posts/index?id=${post.id}`
			});
		}
	}
};
</script>

<style scoped lang="scss">
.u-card-wrap {
	background-color: $u-bg-color;
	padding: 1px;
}

.u-body-item {
	font-size: 32rpx;
	color: #333;
	padding: 20rpx 10rpx;
}

.u-body-item image {
	width: 120rpx;
	flex: 0 0 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
	margin-left: 12rpx;
}
</style>
